<template>
  <view class="coinbank">
    <view class="coinbankHeader">
      <view class="text">
        <uni-icons type="left" @click="skip1"></uni-icons>
      </view>
      <view class="title"> {{ $t('mining.text14') }} </view>
      <image src="../../../static/coinbankHeader.png" @click="skip"></image>
    </view>
    <view class="coinbankCenter">
      <view class="rewardList">
        <view class="rewardItem" v-for="(item, index) in pendingRewardList" :key="index">
          <view class="rewardItemTitle">
            <!-- <image src="../../../static/avatar.png"></image> -->
            {{ item.pledgeCoin }} {{ $t('mining.text15') }}
          </view>

          <view class="rewardItemContent">
            <view class="contentItem">
              <view class="text">{{ $t('mining.text16') }} </view>
              <view class="num"> {{ item.pledgeNum }} {{ item.pledgeCoin }} </view>
            </view>
            <view class="contentItem">
              <view class="text">{{ $t('mining.text17') }} </view>
              <view class="num"> {{ item.distributionNum }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="coinbankBottom">
      <view @click="receiveReward"> {{ $t('mining.text18') }}</view>
    </view>
  </view>
</template>

<script>
import { pendingReward, receive } from '../../../common/apiString';

export default {
  data() {
    return {
      pendingRewardList: []
    };
  },
  mounted() {
    this.getPendingReward();
  },
  methods: {
    receiveReward() {
      if (this.pendingRewardList.length <= 0) return;
      this.$utils.initDataToken({ url: receive, data: {}, type: 'POST' }, (res, msg) => {
        this.$utils.showLayer(this.$t('mining.text19'));
        this.getPendingReward();
      });
    },
    // 查询个⼈待领取奖励;
    getPendingReward() {
      this.$utils.initDataToken({ url: pendingReward, data: {}, type: 'GET' }, (res, msg) => {
        this.pendingRewardList = res;
      });
    },
    skip() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    skip1() {
      uni.navigateTo({
        url: '/pages/coinbank/coinbank'
      });
    }
  }
};
</script>

<style lang="less" scoped>
.coinbank {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1f282f;
  .coinbankHeader {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    .title {
      font-weight: bold;
      color: #fff;
      font-size: 32rpx;
    }
    .text {
      font-weight: bold;
      color: #fff;
      font-size: 32rpx;
      .uni-icons {
        color: #fff !important;
      }
    }
    image {
      width: 34rpx;
      height: 34rpx;
    }
  }

  .coinbankCenter {
    flex: 1;
    background: #1f282f;
    overflow: scroll;
    padding: 0 30rpx 30rpx;
    .rewardItem {
      margin-top: 40rpx;
      height: 208rpx;
      border-radius: 14rpx;
      border: 2rpx solid #475864;
      padding: 30rpx 20rpx;

      .rewardItemTitle {
        display: flex;
        align-items: center;
        color: #fff;
        font-weight: bold;
        font-size: 28rpx;
        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }
      }

      .rewardItemContent {
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;
        .contentItem {
          .text {
            font-size: 20rpx;
            color: #ffffff;
          }
          .num {
            margin-top: 30rpx;
            font-weight: bold;
            font-size: 28rpx;
            color: #ffffff;
          }
        }
      }
    }
  }

  .coinbankBottom {
    height: 180rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    view {
      width: 90%;
      height: 100rpx;
      line-height: 100rpx;
      background: #2f7cf7;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
